<template>
  <div class="execute-records-wrapper">
    <div class="execute-records-title">
      <span>执行记录</span>
      <div class="software-select-btn">
        {{
          `受控主机ip：${mainRow.skIp || ""}` +
          "&emsp;&emsp;" +
          `受控主机名称：${mainRow.skName || ""}` +
          "&emsp;&emsp;" +
          `系统平台：${mainRow.os || ""}` +
          "&emsp;" +
          `${mainRow.ws || ""}位` +
          "&emsp;&emsp;状态："
        }}
        <template v-if="onlineStatus == '在线'">
          <i style="color: #67c23a">{{ onlineStatus }}</i>
        </template>
        <template v-else>
          <i style="color: #f56c6c">{{ onlineStatus }}</i>
        </template>
      </div>
    </div>
    <div class="execute-records-bottom">
      <el-table
        v-loading="loading"
        :data="historyList"
        style="min-height: 500px"
        max-height="600"
      >
        <el-table-column
          label="软件名称"
          align="center"
          prop="softwareName"
          :show-overflow-tooltip="true"
          min-width="180"
        ></el-table-column>
        <el-table-column
          label="路径"
          align="center"
          prop="uploadPath"
          :show-overflow-tooltip="true"
          min-width="180"
        ></el-table-column>
        <el-table-column
          label="上传"
          align="center"
          prop="isUpload"
          :show-overflow-tooltip="true"
          width="50"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.isUpload == "1"
                ? "成功"
                : scope.row.isUpload == "0"
                ? "失败"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="环境变量"
          align="center"
          prop="isUpload"
          :show-overflow-tooltip="true"
          width="80"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.isRunVar == "1"
                ? "成功"
                : scope.row.isRunVar == "0"
                ? "失败"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="安装"
          align="center"
          prop="isInstall"
          :show-overflow-tooltip="true"
          width="50"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.isInstall == "1"
                ? "成功"
                : scope.row.isInstall == "0"
                ? "失败"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="启动"
          align="center"
          prop="isUpload"
          :show-overflow-tooltip="true"
          width="50"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.isRunStart == "1"
                ? "成功"
                : scope.row.isRunStart == "0"
                ? "失败"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="createTime"
          :show-overflow-tooltip="true"
          min-width="80"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="80">
          <template slot-scope="scope">
            <!-- <el-button
              :disabled="scope.row.isRunStart != '1'"
              size="mini"
              type="text"
              icon="el-icon-switch-button"
              @click="handleStop(scope.row)"
              >停止</el-button
            >
            <el-button
              :disabled="scope.row.isInstall != '1'"
              size="mini"
              type="text"
              icon="el-icon-document-delete"
              @click="handleUninstall(scope.row)"
              >卸载</el-button
            > -->

            <el-popover
              placement="top-start"
              width="500"
              trigger="click"
              :content="scope.row.errorMsg || '暂无原因'"
              v-if="
                scope.row.isInstall != '1' ||
                scope.row.isRunStart != '1' ||
                scope.row.isRunVar != '1' ||
                scope.row.isUpload != '1'
              "
            >
              <el-button
                style="margin-left: 10px"
                size="mini"
                type="text"
                icon="el-icon-info"
                slot="reference"
                >原因</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="queryHistoryList"
      />
    </div>
  </div>
  <!-- <div style="height: 100%">
    <el-card shadow="hover" style="height: 100%">
      <div slot="header">
        <span>执行记录111</span>
        <div class="dialog_title">
          {{
            `受控主机ip：${mainRow.skIp || ""}` +
            "&emsp;&emsp;" +
            `受控主机名称：${mainRow.skName || ""}` +
            "&emsp;&emsp;" +
            `系统平台：${mainRow.os || ""}` +
            "&emsp;" +
            `${mainRow.ws || ""}位` +
            "&emsp;&emsp;" +
            `状态：${onlineStatus}`
          }}
        </div>
      </div>

    </el-card>
  </div> -->
</template>

<script>
import { queryHistory } from "@/api/resource/modelSoftware.js";
import { executeStopBat, executeUninsBat } from "@/api/resource/sever-mange.js";
export default {
  props: {
    mainRow: Object,
  },
  data() {
    return {
      historyList: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      onlineStatus: "",
    };
  },
  watch: {
    "$route.query.p": {
      handler(val) {
        if (val) {
          this.queryHistoryList();
        }
      },
      immediate: true,
    },
  },
  created() {
    this.queryHistoryList();
    // 在线状态
    this.onlineStatus = this.mainRow.isOnline == "1" ? "在线" : "离线";
  },
  methods: {
    queryHistoryList() {
      this.loading = true;
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        skId: this.mainRow.skId,
        softwareType: this.mainRow.rjlx,
      };
      queryHistory(param).then((res) => {
        this.historyList = res.rows;
        this.loading = false;
        this.total = res.total;
      });
    },
    handleStop(row) {
      this.$confirm("确定要执行停止操作吗？", "警告", {
        type: "warning",
      })
        .then(() => {
          this.$notify.info({
            title: "执行中",
            message: "正在执行停止操作。。。",
            showClose: false,
            duration: 0,
          });
          executeStopBat(row.id).then((res) => {
            if (res.code == 200) {
              this.$message.success("执行成功");
            } else {
              this.$message.error(res.msg);
            }
            this.$notify.closeAll();
          });
        })
        .catch(() => {});
    },
    handleUninstall(row) {
      this.$confirm("确定要执行卸载操作吗？", "警告", {
        type: "warning",
      })
        .then(() => {
          this.$notify.info({
            title: "执行中",
            message: "正在执行卸载操作。。。",
            showClose: false,
            duration: 0,
          });
          executeUninsBat(row.id).then((res) => {
            if (res.code == 200) {
              this.$message.success("执行成功");
            } else {
              this.$message.error(res.msg);
            }
            this.$notify.closeAll();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  height: 40px;
}
.dialog_title {
  float: right;
  height: 32px;
  font-weight: 600;
  line-height: 32px;
  margin-left: 5px;
  margin-bottom: 5px;
  padding-left: 5px;
  position: relative;
  color: #000;
  z-index: 0;

  // border-radius: 16px;
  // border: 1px solid #e8e9fb;
  // box-shadow: 0 0 10px #e8e9fb;
  text-align: center;
  // width: 700px;
  color: #12a3f5;

  &:before {
    content: "";
    width: 100%;
    // height: 2px;
    background: #e8e9fb;
    // position: absolute;
    // top: 15px;
    left: 100%;
    // background: linear-gradient(to right, #e8e9fb, rgba(255, 255, 255, 0));
  }
}
.execute-records-wrapper {
  border: 1px solid #e5e5e5;
  height: 100%;
  display: flex;
  flex-direction: column;
  .execute-records-title {
    padding: 14px 14px 14px 30px;
    border-bottom: 1px solid #e7e7e7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      position: relative;
      padding-left: 12px;
      font-size: 18px;
      color: #333333;
      &::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 98%;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        background: #1486f6;
      }
    }
    .software-select-btn {
      color: #1890ff;
      font-size: 14px;
      cursor: pointer;
      i {
        font-style: normal;
      }
    }
  }
  .execute-records-bottom {
    flex: 1;
    overflow: auto;
    padding: 30px 30px 0 30px;
  }
}
</style>
